<template>

 <div>
    <el-container>
    <el-aside width="3000px" style="font-size: 24px;margin-left:50px">
      <el-form ref="searchForm" :model="searchForm" :inline="true" label-width="80px">
          <el-col :xl="600" :md="8" :sm="24">
            <el-form-item label="搜索框" prop="courseName">
              <el-input placeholder="请输入课程名" v-model="searchForm.courseName" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <div :style=" { float: 'right', overflow: 'hidden' } || {} ">
                <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
                <el-button class="ml-5" icon="el-icon-refresh-left" @click="reset">重置</el-button>
              </div>
            </el-form-item>
          </el-col>
          <el-col :xl="6||24" :md="8||24" :sm="24">
            
          </el-col>
        </el-form>
    </el-aside>
   </el-container>

    <el-row v-for="(course, index) in card" :key="course.id" :offset="index > 0 ? 0 : 0">  
            <el-divider content-position="left"></el-divider>
        <el-col v-for="(item,indexx) in coursetype" :key="item" :offset="indexx > 0 ? 0 : 0" style="text-align: left;margin-top:20px;align:right">
            <span :underline="false" v-if="index==indexx" >{{item}}</span>
        </el-col>
        <el-col  :span="8" v-for="(courses,indexs) in course" :key="courses.id" :offset="indexs> 0 ? 0 : 0" style="width:300px">
                <el-card  style="margin:3px" :body-style="{ padding: '0px' }" >
                    <img :src="courses.avatarUrl" class="image">
                    <div style="padding: 1px;">
                    <span>课程名称：{{courses.courseName}}</span><br>
                    <span>类型：{{courses.courseType}}</span>
                    <div class="bottom clearfix">
                    <el-button type="text" class="button" style="margin-left:200px" @click="check(courses.id)">查看详情</el-button>
                    </div>
                    </div>
                </el-card>
        </el-col>
        
    </el-row> 
               
</div>
</template>

<script>

import {getCookie} from '@/libs/cookie'
import {selectclasstest,selecttclasstest} from '@/api/modules/create_class'
import {setCookie} from '@/libs/cookie'
import PageTable from '@/components/common/PageTable'

export default {
  data() {
    return {
      currentDate: new Date(),
        card:[],
        coursetype:[],
        courseID:{
            id:''
        },
        address:{
            index:''
        },
        nickname:'',
        searchForm:{
            courseName:''
        }
    };
  },
  mounted(){
        let user = JSON.parse(getCookie("user") || '{}');
          this.nickname = user.nickname
      this.getCourse()

  },
  methods:{
     change(){
      this.$router.push("/my/class");
      },

    check(id){
        this.courseID.id = id
        console.log(id)
        setCookie("courseID", JSON.stringify(this.courseID.id), {
                        expires: 7
                    })
      this.$router.push("/student/class_check");
      },
      getCourse(){
          selectclasstest(null).then(res =>{
             this.card = res.data.courselist
             this.coursetype = res.data.coursetype
          })
      },
    handleOpen(key, keyPath) {
        //console.log(key, keyPath);
      },
    handleClose(key, keyPath) {
       // console.log(key, keyPath);
      },
    handleSelect(key, keyPath) {
       // console.log(key, keyPath);
      },
       search(){
           selecttclasstest({name:this.searchForm.courseName}).then(res =>{
             this.card = res.data.courselist
             this.coursetype = res.data.coursetype
          }) 
      },
      //数据清空重新刷新
      reset() {
        this.$refs.searchForm.resetFields()
        this.getCourse()
      }
  },

}
</script>

<style scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}
  
.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}
  
.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
  .image {
    width: 300px;
    height: 150px;
    min-height: 100%;

  }

    .card-big {
    width: 300px;
    height: 250px;
    min-height: 100%;

  }

</style>